<template>
  <div class="productDetail">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        商品名称：{{row.name}}
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        商品主图：<el-image v-if="row.image" style="width: 100px; height: 100px" :src="row.image"
          :preview-src-list="[row.image]">
        </el-image>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        商品视频：<video v-if="row.productVideo" style="width:300px;height:150px;"
              :src="row.productVideo" controls="controls">您的浏览器不支持视频播放</video>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        商品轮播图：
        <template v-for="item in images">
          <el-image :key="item" style="width: 100px; height: 100px" :src="item" :preview-src-list="images">
          </el-image>
        </template>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8" :xs="24">
        商品分类：{{row.categoryName}}
      </el-col>
      <el-col :span="8" :xs="24">
        序号：{{row.sequence}}
      </el-col>
      <el-col :span="8" :xs="24">
        状态：{{ returnValueToLable(row.status,statusJson) }}
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8" :xs="24">
        定价类型：{{row.priceTypeText}}
      </el-col>
      <el-col :span="8" :xs="24">
        定价（元）：{{ firstSkuPrice }}
      </el-col>
      <el-col :span="8" :xs="24">
        产品分润类型：{{ splitTypeText }}
      </el-col>
    </el-row>
    <el-row v-if="row.type == 4 && row.isSeckill == 2" :gutter="20">
      <el-col :span="24" :xs="24">
        经销商品牌：{{row.proxyBrandText}}
      </el-col>
    </el-row>
    <el-row v-if="row.seckillBeginTime && row.seckillEndTime" :gutter="20">
      <el-col :span="12" :xs="24">
        秒杀开始时间：{{row.seckillBeginTime}}
      </el-col>
      <el-col :span="12" :xs="24">
        秒杀结束时间：{{ row.seckillEndTime }}
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        发货地：{{row.startProvinceName}}{{row.startCityName}}{{row.startDistrictName}}
      </el-col>
      <!-- <el-col :span="8" :xs="24">
        起订量：{{row.starNum}}
      </el-col> -->
      <el-col :span="12" :xs="24">
        计量单位：{{row.unit}}
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        虚拟销量：{{row.virtualSaleNum}}
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        2W商品：{{row.isFinanceProduct ? '是' : '否'}}
      </el-col>
    </el-row>
    <el-card v-if="row.type == 4 || row.isServeProduct == 1" class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>分润列表</span>
      </div>
      <el-table :data="splitData" fit highlight-current-row row-key="id" style="width: 100%;">
        <el-table-column label="供应商名称" prop="companyName" align="center" />
        <el-table-column label="手机号" prop="username" align="center" />
        <el-table-column label="分润比例" prop="splitRate" align="center" />
        <el-table-column label="类型" align="center">
          <template slot-scope="{row}">
            <el-tag v-if="row.splitType == 1" type="success">供货供应商</el-tag>
            <div v-if="row.splitType == 2">
              <el-tag v-if="row.isCounter == 1" type="primary">专柜供应商</el-tag>
              <el-tag v-else-if="row.isCounter == 0 && !row.isGy" type="primary">分润供应商</el-tag>
              <el-tag v-else-if="row.isCounter == 0 && row.isGy" type="primary">产品供应商</el-tag>
            </div>
            <el-tag v-if="row.splitType == 3" type="warning">当前商家</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <br/>

    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>商品规格</span>
      </div>
      <el-table :data="row.skuList" style="width: 100%">
        <el-table-column v-for="(item,index) in skuHeader" :key="index" :label="item.label" :prop="item.value"
          align="center" />
      </el-table>
    </el-card>
    <el-row :gutter="20" style="margin-top:17px">
      <el-col :span="24" :xs="24">
        商品详情：
        <div class="detail" v-if="row.remark" v-html="row.remark"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { productSplitPageByQo } from '@/api/product'

export default {
  name: 'CommonProductDetail',
  props: {
    row: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      skuHeader: [],
      statusJson: [
        { value: 0, label: '已下架' },
        { value: 1, label: '已上架' },
        { value: 2, label: '审核中' },
        { value: 3, label: '已拒绝' }
      ],
      firstSkuPrice: '',
      splitData: [],
      splitTypeText: '',
      splitTypeOption: [
        { value: 1, label: '无' },
        { value: 2, label: 'a1类' },
        { value: 3, label: 'a2类' },
        { value: 4, label: 'b1类' },
        { value: 5, label: 'b2类' },
        { value: 6, label: 'c类' },
      ],
    }
  },
  computed: {
    images() {
      if (this.row && this.row.images) {
        return this.row.images.split(',');
      } else {
        return '';
      }
    }
  },
  created() {
    var headerList = []

    if (this.row.type == 1) {// 众茶通App普通商品
      headerList = [
        { label: '零售价', value: 'guestPrice' },
        { label: '会员价', value: 'price' },
      ]
    } else if (this.row.type == 2) {
      if (this.row.isSeckill == 0) { // 众茶通小程序普通商品
        headerList = [
          { label: '零售价', value: 'guestPrice' },
          { label: '会员价', value: 'price' },
        ]
      } else if (this.row.isSeckill == 1) { // 众茶通小程序秒杀商品
        headerList = [
          { label: '零售价', value: 'guestPrice' },
          { label: '秒杀价', value: 'price' },
        ]
      } else if (this.row.isSeckill == 2) { // 众茶通小程序经销商品
        headerList = [
          { label: '经销价', value: 'price' },
        ]
      } else if (this.row.isSeckill == 3) { // 众茶通小程序活动专区商品
        headerList = [
          { label: '零售价', value: 'guestPrice' },
          { label: '活动价', value: 'price' },
        ]
      }
    } else if (this.row.type == 3) {// 微商城
      headerList = [
        { label: '零售价', value: 'guestPrice' },
        { label: '会员价', value: 'price' },
      ]
    } else if (this.row.type == 4) {// 众茶优选
      if (this.row.isSeckill == 0) { // 众茶优选小程序普通商品
        headerList = [
          { label: '零售价', value: 'guestPrice' },
          { label: '底价', value: 'costPrice' },
          { label: '会员价', value: 'price' },
        ]
      } else if (this.row.isSeckill == 1) { // 众茶优选小程序秒杀商品
        headerList = [
          { label: '零售价', value: 'guestPrice' },
          { label: '底价', value: 'costPrice' },
          { label: '秒杀价', value: 'price' },
        ]
      } else if (this.row.isSeckill == 2) { // 众茶优选小程序经销商品
        headerList = [
          { label: '零售价', value: 'guestPrice' },
          { label: '底价', value: 'costPrice' },
          { label: '经销商价格', value: 'price' },
        ]
      } else if (this.row.isSeckill == 4) { // 众茶优选小程序专柜商品
        headerList = [
          { label: '零售价', value: 'guestPrice' },
          { label: '底价', value: 'costPrice' },
          { label: '会员价', value: 'price' },
        ]
      }
    } else if (this.row.type == 14) {// 众茶优选积分商品
      headerList = [
        { label: '价格', value: 'price' },
        { label: '积分', value: 'score' }
      ]
    }

    let array = [
      { label: '规格名称', value: 'name' },
      { label: '计量单位', value: 'unit' },
      { label: '净含量(g)', value: 'weight' },
      { label: '库存', value: 'store' },
      { label: '起订量', value: 'startNum' },
    ]
    this.skuHeader = headerList.concat(array)

    if (this.row.skuList.length > 0) {
      this.firstSkuPrice = this.row.skuList[0].priceText
    }
    
    this.splitTypeOption.forEach(element => {
      if (element.value == this.row.splitType) {
        this.splitTypeText = element.label
      }
    });
    
    if (this.row.type == 4 || this.row.isServeProduct == 1) {
      this.getProductSplitRateData(this.row.id)
    }
  },
  methods: {
    getProductSplitRateData(id) {
      productSplitPageByQo({ productId:id, pageNo: 1, pageSize: 99 }).then(res => {
        this.splitData = res.list
      })
      .catch((err) => {
        console.log(err)
      })
    },
  }
}
</script>
<style lang="scss">
.productDetail {
  .el-row {
    margin-bottom: 15px;
  }
  .detail {
    overflow: auto;
    margin-top: 5px;
    padding: 5px;
    border: 1px solid #efefef;
    img {
      max-width: 100%;
    }
  }
}
</style>
